<template>
	<view class="order-item-box" @click="jumpPath">
		<view class="order-top space-between fz14">
			<view class="">
				订单号：{{order_item.order_id}}
			</view>
			<view class="c-d00000">
				{{orderStatus}}
			</view>
		</view>
		<view class="order-info-box flex">
			<image class="mr10" :src="order_item.image" mode=""></image>
			<view class="goods-description">
				<view class="fz15 bold mb8 goods-title-box">
					{{order_item.title}}
				</view>
				<view class="space-between">
					<view class="c6">
						规格：{{order_item.specification}}
					</view>
					<view class="c6">
						x{{order_item.number}}
					</view>
				</view>
			</view>
		</view>
		<view class="order-bottom space-between">
			<view class="">
				<text class="fz13">合计:</text>
				<text class="c-d22119 fz15 bold">{{order_item.gold_coin}}<text class="fz12 normal">金币+</text>{{order_item.points}}<text class="fz12 normal">积分</text></text>
			</view>
			<view class="flex fz13">
				<u-button @click="clickControls(1)" throttle-time='3000' v-if="order_item.order_type == 1" class="controls-btn">去支付</u-button>
				<u-button @click="clickControls(2)" throttle-time='3000' v-if="order_item.order_type == 2" class="controls-btn">催发货</u-button>
				<u-button @click="clickControls(3)" throttle-time='3000' v-if="order_item.order_type == 3 || order_item.order_type == 4" class="material-flow-btn">查看物流</u-button>
				<u-button @click="clickControls(4)" throttle-time='3000' v-if="order_item.order_type == 3" class="controls-btn ml10">确认收货</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props: {
			order_item: {
				default: () => {},
				type: Object
			}
		},
		computed: {
			orderStatus() {
				let order_show_status = ['待付款','待发货','待收货','已完成']
				return order_show_status[this.order_item.order_type-1]
			},
		},
		mounted() {
		},
		methods: {
			// 点击操作按钮
			clickControls(value) {
				this.$emit('clickControls',value)
			},
			// 跳转页面
			jumpPath() {
				this.$emit('jumpPath','/pages/subpackage/my/orderDetail')
			}
		}
	}
</script>

<style lang="scss">
	.order-item-box {
		background-color: #ffffff;
		margin-top: 20rpx;
		.order-top{
			height: 86rpx;
			padding: 0 28rpx;
			box-sizing: border-box;
		}
		.order-info-box{
			border-top: 1rpx solid #E6E6E6;
			border-bottom: 1rpx solid #E6E6E6;
			padding: 20rpx 30rpx;
			image {
				width: 166rpx;
				height: 166rpx;
				border-radius: 10rpx;
			}
			.goods-description{
				width: calc(100vw - 246rpx);
				.goods-title-box{
					width: calc(100vw - 246rpx);
					overflow: hidden; //超出文本隐藏
					text-overflow: ellipsis; ///超出部分省略号显示
					display: -webkit-box; //弹性盒模型
					-webkit-box-orient: vertical; //上下垂直
					-webkit-line-clamp: 2; //自定义行数
				}
			}
		}
		.order-bottom{
			height: 90rpx;
			padding: 0 28rpx;
			box-sizing: border-box;
			.controls-btn{
				width: 150rpx;
				height: 50rpx;
				background: linear-gradient(0deg,#b07412 0%, #e3ba5b 100%);
				border-radius: 25rpx;
				color: #ffffff;
				text-align: center;
				line-height: 50rpx;
				display: inline-block;
				padding: 0 !important;
				font-size: 26rpx;
				box-sizing: border-box;
			}
			.material-flow-btn{
				width: 150rpx;
				height: 50rpx;
				text-align: center;
				line-height: 50rpx;
				border: 1rpx solid #CCCCCC;
				box-sizing: border-box;
				border-radius: 25rpx;
				display: inline-block;
				padding: 0 !important;
				font-size: 26rpx;
			}
			uni-button:after {
			  content: " ";
			  border: none !important;
			}
		}
	}
</style>